<template>
  <div id="LeagueConsist" style="width: 100%; height: 80vh;padding: 10px"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "LeagueConsist",
  props:["LeagueConsistData"],
  data() {
    return { data: this.LeagueConsistData };
  },
  created() {
    // console.log(this.LeagueConsistData)
  },
  mounted() {
    this.LeagueJS.getTotalPeople(info=>{
      console.log(info)
      let tempInfo=[ ['product', '2012', '2013', '2014', '2015', '2016', '2017'],['联盟委员会'],['联盟管理机构'],['联盟普通成员'],['监管机构']]
      info.map((i,j)=>{
        tempInfo[1].push(parseInt(i.leagueCommitteePeople))
        tempInfo[2].push(parseInt(i.leagueManagerPeople))
        tempInfo[3].push(parseInt(i.leagueMembersPeople))
        tempInfo[4].push(parseInt(i.superviseMembersPeople))
        j++
      })
      this.data = tempInfo
    })
  },
  watch:{
    "data":function () {
      console.log(this.data)
      this.renderEcharts(this.data);
    }
  },
  methods:{
    renderEcharts(value) {
      if (!document.getElementById("LeagueConsist")) {
        return;
      }
      const chartDom = document.getElementById("LeagueConsist");
      const myChart = echarts.init(chartDom);
      let option;

      setTimeout(function () {
        option = {
          title: {
            text: '联盟组成部分变动'
          },
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: true
          },
          dataset: {
            source: value
          },
          xAxis: { type: 'category' },
          yAxis: { gridIndex: 0 },
          grid: { top: '55%' },
          series: [
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              emphasis: {
                focus: 'self'
              },
              label: {
                formatter: '{b}: {@2012} ({d}%)'
              },
              encode: {
                itemName: 'product',
                value: '2012',
                tooltip: '2012'
              }
            }
          ]
        };
        myChart.on('updateAxisPointer', function (event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            });
          }
        });
        myChart.setOption(option);
      });

      option && myChart.setOption(option);
    },
  }
}
</script>

<style scoped>

</style>
